<template>
  <view class="wrap">
		<!-- #ifdef H5 -->
		<video-component :list="seriesList" :info='info' :activeIndex='activeIndex' ref="videoComponents" @changeSeries='index => activeIndex = index '></video-component>
		<!-- #endif -->
		<!-- 剧集 -->
		<view class="series">
			<view class="item" :class="activeIndex === index ? 'active' : ''" v-for="(item, index) in seriesList" :key="index" @click='chooseSeries(item, index)'>
				<!-- #ifdef H5 -->
					<c-lottie
						v-if="activeIndex === index"
						class="play"
						src='../../static/json/play.json'
						width="24rpx" height='24rpx'
						:loop="true"></c-lottie>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<x-lottie
					v-if="activeIndex === index"
					class="play"
					:key='index'
					:option="{path:require('../../static/json/play.json')}"/>
				<!-- #endif -->
				{{index+1}}
			</view>
		</view>
  </view>
</template>

<script>
let videoCTX = null
// #ifdef H5
import videoComponent from './subNVue/components/video-component.nvue'
// #endif
import {mapGetters, mapMutations} from 'vuex'
export default {
	// #ifdef APP-PLUS
	// #endif
  components: {
		// #ifdef H5
    videoComponent,
		// #endif
  },
  data() {
    return {
      info: {},
			seriesList: [
				{ title: 7, url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4' },
			  { title: '测试2', url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4', mark: 9.2, id: 2 },
			  { title: '测试3', url: 'https://s1.putgate.org/cdn/H4sIAAAAAAAAAwXB23KCMBAA0F8iiVrtTF8c0XohAsluKG9AUmOzMBlhKvXre86CdwsuWMPeuGOu7TZ8bZvV94Y5IbrOJu.mp1qFKdEoBwh0RCFX2kxjKShmQA0K_wdBgkzj1pG_2BBmB0TZzufq5X_O3Ja1lqrV5agPVKgqTq4_zbWJWfsZnoj0MIP_vaZT8VVhrl94BiEFmuVs9pRa2OdGb5VOZtBwe7ZVfBRDXF53eITDKbHsxrGn0dzXH_8dPLqAzQAAAA--/list.m3u8' },
			  { title: '测试4', url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4', mark: 9.2, id: 4 },
			  { title: '测试5', url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4' },
			  { title: 6, url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4' },
			  { title: 8, url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4' },
			  { title: 9, url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4' },
			  { title: 10, url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4' }
			],
      activeIndex: 0,
			src: '',
			poster: '',
			isCollect: false
    }
  },
  async onLoad (e) {
		setTimeout(() => {
			uni.$emit('video',{
				event:"init",
				params:{
					videos:this.seriesList || [],
					activeIndex:this.activeIndex
				}
			})
		}, 200)
		uni.$on('videoIndex', e => this.activeIndex = e)
  },
	mounted() {
		videoCTX = uni.createVideoContext('myVideo',this)
	},
  methods: {
    async chooseSeries (item, index) {
      videoCTX.pause()
      this.activeIndex = index
      this.src = item.url
			this.info = item
      // #ifndef APP-PLUS
      setTimeout(()=>{
				this.$refs.videoComponents.switchVideo(item, index)
      },300)
      // #endif
      // #ifdef APP-PLUS
      uni.$emit('video',{
      	event:"change",
      	params:{
      		activeIndex:this.activeIndex
      	}
      })
      // #endif
    },
  }
}
</script>

<style lang="scss" scoped>
.info{
  font-weight: 300;
  font-size: 24rpx;
  color: #72757B;
  padding: 36rpx 20rpx 30rpx;
  .title{
    font-weight: 400;
    font-size: 32rpx;
    color: #FFFFFF;
    margin-bottom: 12rpx;
		width: 70vw;
  }
  .txt1{
    color: #EF243A;
  }
	.txt2{
		flex: 1;
		margin-left: 4rpx;
		text-align: right;
	}
}
.series{
  margin: 22rpx 0 0  20rpx;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  .item{
    width: 104rpx;
    height: 104rpx;
    line-height: 104rpx;
    background: #272A2F;
    border-radius: 8rpx;
    margin-right: 16rpx;
    margin-bottom: 20rpx;
    font-weight: 400;
    font-size: 28rpx;
    color: #989A99;
    text-align: center;
    position: relative;
    border: 2rpx solid transparent;
    .download,.play{
      width: 24rpx;
      height:24rpx;
      position: absolute;
      bottom: 8rpx;
      right: 8rpx;
    }
  }
  .active{
    border: 2rpx solid #D62E45;
  }
}
#advertising{
  margin: 10rpx 0;
}
.cache{
  position: absolute;
  bottom: 54rpx;
  left: 0;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100rpx;
  background: #272A31;
  .txt{
    font-weight: 300;
    font-size: 28rpx;
    color: #FFFFFF;
    margin: 0 4rpx;
  }
}
.content{
	/* #ifdef APP-PLUS */
	height: calc(100vh);
	/* #endif */
	/* #ifndef APP-PLUS */
	height: calc(100vh - 460rpx);
	/* #endif */
}
::v-deep {
	.c-lottie div{
		display: flex;
		align-items: center;
	}
}
</style>
